<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用栅格系统</title>

        <!-- 使用 link 链接外部样式，必须指定 rel 为 stylesheet  ，使用 href 指定样式文件名称 -->
        <link rel="stylesheet" href="cells.css" >

        <!-- 在 style 元素内部指定当前页面上所特有的样式 -->
        <style type="text/css">
            .wrapper { width: 80% ; margin: 25px auto ;  }
            .odd { height: 50px ; background-color: #1e9fff ; }
            .even { height: 50px ; background-color: #ff4400; }
        </style>
    </head>
    <body>

        <div class="row wrapper">
            <div class="cells-12-1 odd"></div>
            <div class="cells-12-1 even"></div>
            <div class="cells-12-1 odd"></div>
            <div class="cells-12-1 even"></div>
            <div class="cells-12-1 odd"></div>
            <div class="cells-12-1 even"></div>
            <div class="cells-12-1 odd"></div>
            <div class="cells-12-1 even"></div>
            <div class="cells-12-1 odd"></div>
            <div class="cells-12-1 even"></div>
            <div class="cells-12-1 odd"></div>
            <div class="cells-12-1 even"></div>
        </div>

        <div class="row wrapper">
            <div class="cells-12-2 odd"></div>
            <div class="cells-12-2 even"></div>
            <div class="cells-12-2 odd"></div>
            <div class="cells-12-2 even"></div>
            <div class="cells-12-2 odd"></div>
            <div class="cells-12-2 even"></div>
        </div>

        <div class="row wrapper">
            <div class="cells-5-1 odd"></div>
            <div class="cells-5-1 even"></div>
            <div class="cells-5-1 odd"></div>
            <div class="cells-5-1 even"></div>
            <div class="cells-5-1 odd"></div>
        </div>

        <div class="row wrapper">
            <div class="cells-12-3 odd"></div>
            <div class="cells-12-3 even"></div>
            <div class="cells-12-3 odd"></div>
            <div class="cells-12-3 even"></div>
        </div>

        <div class="row wrapper">
            <div class="cells-12-4 odd"></div>
            <div class="cells-12-4 even"></div>
            <div class="cells-12-4 odd"></div>
        </div>

        <div class="row wrapper">
            <div class="cells-12-6 odd"></div>
            <div class="cells-12-6 even"></div>
        </div>

    </body>
</html>